<template>
  <section class="relative text-white overflow-hidden pt-24 min-h-[90vh] flex items-center">
    <!-- 背景图（添加视差动画） -->
    <div class="absolute inset-0 z-0">
      <img src="@/assets/bg/person_bg.png" alt="技术背景" class="w-full h-full object-cover object-center animate-bg-zoom" />
    </div>

    <div class="container mx-auto px-4 py-20 md:py-32 relative z-10">
      <div class="flex flex-col lg:flex-row items-center">
        <!-- 文字内容区 - 添加入场动画 -->
        <div class="lg:w-2/3 mb-10 lg:mb-0 lg:pr-12 animate-slide-in">
          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight text-white drop-shadow-lg">
            <span class="inline-block animate-fade-in" style="animation-delay: 0.1s">全栈开发工程师</span><br />
            <span class="text-blue-300 inline-block animate-fade-in" style="animation-delay: 0.3s">构建未来数字体验</span>
          </h1>
          <p class="text-lg md:text-xl mb-8 text-white/90 max-w-2xl drop-shadow-md animate-fade-in" style="animation-delay: 0.5s">
            专注于构建高性能、可扩展的Web应用，精通前后端技术栈，为企业提供端到端数字化解决方案
          </p>
          <div class="flex flex-wrap gap-4 mb-12 animate-fade-in" style="animation-delay: 0.7s">
            <button
              class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-8 rounded-lg transition-all duration-300 transform hover:scale-105 hover:shadow-xl shadow-lg">
              联系我
            </button>
            <button
              class="bg-transparent border-2 border-white hover:bg-white/10 text-white font-bold py-3 px-8 rounded-lg transition-all duration-300 hover:shadow-lg">
              查看作品
            </button>
          </div>

          <!-- 统计数据 - 添加数字增长动画 -->
          <div class="grid grid-cols-3 gap-6 md:gap-10 animate-fade-in" style="animation-delay: 0.9s">
            <div class="text-center">
              <p class="text-3xl md:text-4xl font-bold text-blue-300" ref="counter1">0</p>
              <p class="text-sm md:text-base text-blue-100 mt-1">项目经验</p>
            </div>
            <div class="text-center">
              <p class="text-3xl md:text-4xl font-bold text-blue-300" ref="counter2">0</p>
              <p class="text-sm md:text-base text-blue-100 mt-1">客户满意度</p>
            </div>
            <div class="text-center">
              <p class="text-3xl md:text-4xl font-bold text-blue-300" ref="counter3">0</p>
              <p class="text-sm md:text-base text-blue-100 mt-1">技术支持</p>
            </div>
          </div>
        </div>

        <!-- 图片区域 - 添加延迟入场动画 -->
        <div class="lg:w-1/3 flex justify-center">
          <div class="relative w-full max-w-md transform lg:translate-x-10 animate-fade-in-up" style="animation-delay: 1.2s">
            <img src="https://picsum.photos/id/180/600/400" alt="全栈开发工程师工作场景"
              class="rounded-lg shadow-2xl border-4 border-white/20 transform rotate-2 hover:rotate-0 transition-all duration-700 hover:shadow-4xl hover:scale-105" />
            <div
              class="absolute -bottom-5 -left-5 bg-white text-blue-900 p-3 rounded-lg shadow-lg transform hover:scale-105 transition-transform animate-bounce-slow">
              <p class="font-bold">专业服务</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { onMounted } from 'vue';

// 将ref改为useTemplateRef语法
const counter1 = useTemplateRef('counter1');
const counter2 = useTemplateRef('counter2');
const counter3 = useTemplateRef('counter3');

// 数字动画函数（保持不变）
const animateCounter = (element, target, duration = 2000, suffix = '+') => {
  let start = 0;
  const increment = target / (duration / 16);
  const timer = setInterval(() => {
    start += increment;
    if (start >= target) {
      clearInterval(timer);
      element.textContent = target + suffix;
    } else {
      element.textContent = Math.floor(start) + suffix;
    }
  }, 16);
};

// 页面加载完成后执行动画（保持不变）
onMounted(() => {
  // 初始化数字动画
  setTimeout(() => {
    if (counter1.value) animateCounter(counter1.value, 50);
    if (counter2.value) animateCounter(counter2.value, 99, 2000, '%');
    if (counter3.value) counter3.value.textContent = '24/7'
  }, 1000);
});
</script>

<style lang="scss">
/* 背景图视差动画 */
@keyframes bgZoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); }
}

/* 元素入场动画 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { transform: translateX(-50px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeInUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* 轻微弹跳动画 */
@keyframes bounceSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* 应用动画类 */
.animate-bg-zoom {
  animation: bgZoom 20s ease-in-out infinite alternate;
}

.animate-fade-in {
  animation: fadeIn 0.8s ease-out forwards;
  opacity: 0;
}

.animate-slide-in {
  animation: slideIn 1s ease-out forwards;
  opacity: 0;
}

.animate-fade-in-up {
  animation: fadeInUp 1s ease-out forwards;
  opacity: 0;
}

.animate-bounce-slow {
  animation: bounceSlow 3s ease-in-out infinite;
}
</style>